<html>
	<head>
		<title>Layers Tree Panel</title>

		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
		<script type="text/javascript" src="../../resources/ext/ext-base.js"></script>
 		<script type="text/javascript" src="../../resources/ext/ext-all.js"></script>
		
 		<script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
		<script type="text/javascript" src="../../resources/geoext/script/GeoExt.js"></script>
		
		<link rel="stylesheet" type="text/css" href="../../resources/css/style.css" />
		
		<script type="text/javascript" src="../../resources/js/GBIF.GeoSpatial.GeoMapPanel.js"></script>
		<script type="text/javascript" src="../../resources/js/GBIF.GeoSpaital.LayersTree.js"></script>
		<script type="text/javascript" src="../../resources/Language/GBIF.GeoSpatial-lang-en.js"></script>
		
		<script type="text/javascript">
			
			Ext.onReady(function() {

					Ext.fly(document.body).on('contextmenu', function(e, target) {
					  	e.preventDefault();
					});

					Ext.QuickTips.init();

					panel = new GBIF.GeoSpatial.MapComponent({
							renderTo: "mappanel"
						,	width: 350
						,	height: 300
					});
					
					tree = new GBIF.GeoSpatial.LayersTree({
							layers: panel.layers
						,	title: 'Sample Layers'
						,	renderTo: 'tree'
						,	width: '300'
						, height: '150'
//						,	opacity: 0.5
					});
/*
					tree.on('removeLayer', function(node) {
						panel.map.removeLayer(node.layer);
					});
					tree.on('addLayer',function(node){
							panel.map.addLayer( node.layer );
					});
*/					
					var layer1 = new OpenLayers.Layer.WMS(
							"World Map"
						,	"http://maps.opengeo.org/geowebcache/service/wms"
						,	{
									layers: "bluemarble"
								,	version: "1.0.0"
								, 	transparent: "true"
								, 	format: "image/png"
							}
						, {
									allowOpacity: false
								,	allowDelete: false
							}
					)
	
					var layer2 = new OpenLayers.Layer.WMS(
							"GBIF - Sample"
						, 	"http://geoserver.gbif.org/wms?"
						,	{ 
									layers: "gbif:gbifDensityLayer"
								, 	version: "1.0.0"
								,	opacity: 0.5
								, 	transparent: "true"
								, 	format: "image/png"
								, 	filter: "(<Filter><And><PropertyIsEqualTo><PropertyName>type</PropertyName><Literal>1</Literal></PropertyIsEqualTo><PropertyIsEqualTo><PropertyName>concept</PropertyName><Literal>13534258</Literal></PropertyIsEqualTo></And></Filter>)"
							}
	        );
		

					var layer3 = new OpenLayers.Layer.WMS(
							"Life Mapper"
						,	"http://lifemapper.org/ogc?"
						,	{
								layers: "prj_865560"
							, 	version: "1.0.0"
							, 	transparent: "true"
							, 	format: "image/gif"
							,	opacity: 0.5
						}
	        );

	
					panel.map.addLayer( layer1 );
					panel.map.addLayer( layer2 );
					panel.map.addLayer( layer3 );
		});
		
	</script>
	</head>
	<body>
		<div style="position: relative;">
				<div id="tree"></div>
				<div id="mappanel"></div>
		</div>
	</body>
</html>